<template>
  <div class="item_desc">
    <div class="item_desc_title">商品详情</div>
    <div class="item_desc_wrap" ref="itemDesc" v-if="desc" v-html="desc"></div>
    <img v-lazy="shuomingImage" width="100%" @click="showShuoMingPreview"/>
  </div>
</template>

<script>
import shuomingImage from "@/assets/images/shuoming.jpg";
import wx from 'weixin-js-sdk';

export default {
    name: "item-detail",
    props: {
        desc: String
    },
    data() {
      return {
        shuomingImage,
        previewUrl: []
      }
    },

    mounted() {
      let vm = this;

      this.$nextTick(() => {
        //详情里面的图片，增加预览功能
        if (this.$refs.itemDesc) {
          let imgs = this.$refs.itemDesc.getElementsByTagName("img");

          for (let i = 0; i < imgs.length; ++i) {
            let img = imgs.item(i);
            img.onclick = (() => vm.showImgPreview(img.src));
            vm.previewUrl.push(img.src);
          }
        }

        vm.previewUrl.push(location.origin + vm.shuomingImage);
      });
    },

    methods: {
      showImgPreview(imgSrc) {
        let vm = this;

        wx.ready(function() {
          wx.previewImage({
              current: imgSrc, // 当前显示图片的http链接
              urls: vm.previewUrl // 需要预览的图片http链接列表
          });
        });
      },

      showShuoMingPreview() {
        this.showImgPreview(location.origin + this.shuomingImage);
      }
    }
};

</script>

<style lang="scss" scoped>
@import "../../../assets/scss/mixin";

.item_desc {
  background-color: #fff;
  margin-top: 10px;
  
  p {
    padding: 0 10px;
  }
}

.item_desc_title {
  @include one-border;
  padding: 10px 0;
  text-align: center;
}
.item_desc_wrap {
  margin-bottom: 10px;
}

</style>
